<template>
  <view class="">
    <!-- begin -搜索热区 -->
    <SearchLink />
    <!-- end -搜索热区 -->

    <!-- 主体内容 -->
    <view class="content" v-if="categoryList.length">
      <view class="left">
        <view
          class="cate1"
          :class="{ active: index === activeIndex }"
          v-for="(cate1, index) in categoryList"
          :key="index"
          @click="selectCate1(index)"
        >
          {{ cate1.cat_name }}
        </view>
      </view>
      <scroll-view
        :scroll-top="scrollTop"
        scroll-y="true"
        class="right"
        @scroll="scroll"
      >
        <image src="../../static/images/titleImage.png" mode=""></image>
        <view
          class="cate2"
          v-for="(cate2, index2) in categoryList[activeIndex].children"
          :key="index2"
        >
          <view class="title">
            /<text>{{ cate2.cat_name }}</text
            >/
          </view>
          <view class="cate3-wrapper">
            <view
              class="cate3"
              v-for="(cate3, index3) in cate2.children"
              :key="index3"
              @click="toSearchList(cate3.cat_name)"
            >
              <image :src="cate3.cat_icon"></image>
              <view>{{ cate3.cat_name }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
// 引入SearchLink组件
import SearchLink from '@/components/SearchLink.vue'

export default {
  components: {
    // SearchLink:SearchLink
    SearchLink
  },
  data () {
    return {
      // 一级分类选中的下标
      activeIndex: 0,
      // 分类列表
      categoryList: [],
      // 右侧滚动条在顶部
      scrollTop: 0,
      // 记录滚动条的位置
      old: {
        scrollTop: 0
      }
    }
  },
  onLoad () {
    this.getCategories()
  },
  methods: {
    // 跳转到搜索列表
    toSearchList (catName) {
      wx.navigateTo({
        url: '/pages/search_list/main?catName=' + catName
      })
    },
    async getCategories () {
      this.categoryList = await this.$request({
        url: '/api/public/v1/categories'
      })
    },
    scroll: function (e) {
      // 记下滚动条的位置
      this.old.scrollTop = e.detail.scrollTop
    },
    // 选中一级分类
    selectCate1 (index) {
      this.activeIndex = index
      // // 先设置一下scrollTop，再回到0
      // 当我点击一级分类,先把右侧的滚动条设置为之前的位置
      this.scrollTop = this.old.scrollTop
      this.$nextTick(function () {
        // 滚动条位置设置为点击之前,然后再回到顶部
        this.scrollTop = 0
      })
    }
  }
}
</script>

<style lang="less">
.content {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 100rpx;
  bottom: 0;

  .left {
    width: 198rpx;
    overflow: scroll;
  }

  .right {
    // 让右侧单独滚动
    overflow: scroll;
    // 右侧占满剩下的宽度
    flex: 1;
    padding: 20rpx 16rpx;

    > image {
      width: 520rpx;
      height: 180rpx;
    }
  }
}

.cate1 {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  border: 1rpx solid #eee;
  box-sizing: border-box;
  color: #333;
  background-color: #f4f4f4;

  &.active {
    background-color: #fff;
    color: #eb4450;
    position: relative;

    &::before {
      position: absolute;
      content: '';
      width: 8rpx;
      height: 60rpx;
      background-color: #eb4450;
      left: 0;
      top: 20rpx;
    }
  }
}

.cate2 {
  margin-bottom: 60rpx;

  .title {
    height: 110rpx;
    line-height: 110rpx;
    color: #e0e0e0;
    text-align: center;

    text {
      color: #333;
      margin: 0 30rpx;
    }
  }
}

.cate3-wrapper {
  display: flex;
  flex-wrap: wrap;

  .cate3 {
    width: 33.33%;
    text-align: center;
    margin-bottom: 30rpx;

    image {
      width: 120rpx;
      height: 120rpx;
    }
  }
}
</style>
